Skip to content

fix(theme-toggle): resolve hydration error and add to Projects page #680

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
ThanhNguyxn wants to merge 4 commits into
base: main
Choose a base branch
from
Open

fix(theme-toggle): resolve hydration error and add to Projects page #680

ThanhNguyxn wants to merge 4 commits into from
+34 −5

Conversation

@ThanhNguyxn
Copy link

@ThanhNguyxn ThanhNguyxn commented Jan 24, 2026 •
edited by coderabbitai bot
Loading

Summary

This PR fixes two related issues with the ThemeToggle component:

Fixes #648 - ThemeToggle hydration error and wrong icon display

Problem:

  • The ThemeToggle component always displayed the Sun icon regardless of the current theme
  • It caused hydration errors because useTheme() returns undefined on the server

Solution:

  • Added mounted state to prevent hydration mismatch between server and client
  • Used resolvedTheme instead of theme to correctly detect the actual theme (handles "system" theme)
  • Display Sun icon in dark mode (to switch to light) and Moon icon in light mode (to switch to dark)
  • Fixed className prop not being applied

Fixes #646 - Add theme toggle to Projects page

Problem:

  • The Projects page didn't have a theme toggle, making it inconsistent with other pages

Solution:

  • Added the ThemeToggle component to the Projects page header next to the action buttons

Changes

  • apps/web/src/components/theme-toggle.tsx: Fixed hydration error and icon logic
  • apps/web/src/app/projects/page.tsx: Added ThemeToggle import and component

Testing

  1. Navigate to any page with the theme toggle
  2. Verify the correct icon is displayed (Moon in light mode, Sun in dark mode)
  3. Click to toggle theme and verify it switches correctly
  4. Check browser console - no hydration errors
  5. Navigate to Projects page and verify theme toggle is present

Summary by CodeRabbit

  • New Features

    • Added a theme toggle to the projects page header (visible outside selection mode) for quick light/dark switching.

  • Bug Fixes

    • Prevents hydration mismatch by rendering the toggle only when ready.
    • Ensures the toggle icon and accessible label reflect the current theme.
    • Accepts optional styling for improved layout integration.

✏️ Tip: You can customize this high-level summary in your review settings.

@ThanhNguyxn
fix(theme-toggle): resolve hydration error and add to Projects page
8066b37 
- Fix OpenCut-app#648: Add mounted state to prevent hydration mismatch
- Fix OpenCut-app#648: Use resolvedTheme to correctly detect dark/light mode
- Fix OpenCut-app#648: Display Sun icon in dark mode, Moon icon in light mode
- Fix OpenCut-app#646: Add ThemeToggle component to Projects page header
@netlify
Copy link

netlify bot commented Jan 24, 2026 •
edited
Loading

👷 Deploy request for appcut pending review.

Visit the deploys page to approve it

Name Link
🔨 Latest commit 7c23a91

@vercel
Copy link

vercel bot commented Jan 24, 2026

@ThanhNguyxn is attempting to deploy a commit to the OpenCut OSS Team on Vercel.

A member of the Team first needs to authorize it.

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Jan 24, 2026 •
edited
Loading

Warning

Rate limit exceeded

@ThanhNguyxn has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 18 minutes and 1 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

📝 Walkthrough

Walkthrough

Adds a client-mounted ThemeToggle to prevent SSR hydration mismatches and updates the Projects page header to render ThemeToggle when not in selection mode.

Changes

Cohort / File(s) Summary
ThemeToggle component
apps/web/src/components/theme-toggle.tsx		 Adds mounted state with useEffect to delay client-only rendering, uses resolvedTheme from next-themes, fixes icon conditional logic (Sun vs Moon), updates accessible text, and accepts className.
Projects page UI
apps/web/src/app/projects/page.tsx		 Imports and renders ThemeToggle in the header when not in selection mode, positioned before the "Select Projects" button.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 I hopped in code to hush the fight,
I waited to mount until the client’s light,
Moon and Sun now swap their role at night,
Projects header now toggles just right.

🚥 Pre-merge checks | ✅ 4 | ❌ 1
❌ Failed checks (1 warning)
Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The PR title accurately summarizes both main changes: fixing hydration error in ThemeToggle and adding it to Projects page.
Description check ✅ Passed The description comprehensively covers both issues with clear problem/solution sections, testing steps, and technical details about the fixes.
Linked Issues check ✅ Passed Changes directly address both #648 (hydration fix, correct icon display) and #646 (add ThemeToggle to Projects page) with appropriate implementation.
Out of Scope Changes check ✅ Passed All changes are directly scoped to the two linked issues; no extraneous modifications to unrelated files or functionality.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

coderabbitai[bot]
coderabbitai bot reviewed Jan 24, 2026
View reviewed changes
Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Fix all issues with AI agents 
In `@apps/web/src/components/theme-toggle.tsx`:
- Around line 22-26: The Button elements in theme-toggle.tsx currently lack an
explicit type, which can cause accidental form submission; update both Button
usages (the one returning the icon span and the one in the alternate block at
lines referenced) to include type="button" on the <Button> components so they do
not act as default submit buttons when placed inside a form.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@coderabbitai coderabbitai[bot] coderabbitai[bot] left review comments

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[BUG] ThemeToggle always shows Sun icon and causes hydration error during SSR [FEATURE] Add theme toggle button to Projects page

1 participant

@ThanhNguyxn